<template>
   <div class="content">
       <div class="h-header">
            <van-nav-bar
                    title="消息"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            />
        </div>
        <div class="main">
            <ul>
                <li>
                    <figure>
                        <div class="f-wrap">
                          <van-icon class="iconfont" class-prefix='icon' name='icon' />   
                        </div>
                        <figcaption>
                            <p><span>活动公告</span> <em>2019.11.02</em></p>
                            <h2>154期目录活动(10月)中奖公告</h2>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <div class="f-wrap" style="background:pink">
                             <van-icon class="iconfont" class-prefix='icon' name='viphuiyuanhuangguan' />   
                        </div>
                        <figcaption>
                            <p><span>会员俱乐部</span> </p>
                            <h2>暂无</h2>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <div class="f-wrap" style="background:purple">
                            <van-icon class="iconfont" class-prefix='icon' name='kefu' />
                        </div>
                        <figcaption>
                            <p><span>京东客服</span> </p>
                            <h2>暂无</h2>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <div class="f-wrap" style="background:blue">
                            <van-icon class="iconfont" class-prefix='icon' name='qianbao' />
                        </div>
                        <figcaption>
                            <p><span>我的资金</span> <em>2019.11.02</em></p>
                            <h2>你有2.0积分即将过期，快去看看</h2>
                        </figcaption>
                    </figure>
                </li>
                 <li>
                    <figure>
                        <div class="f-wrap" style="background:yellowgreen">
                            <van-icon class="iconfont" class-prefix='icon' name='xiaoxi2' />
                        </div>
                        <figcaption>
                            <p><span>顾客中心</span> <em>2019.11.02</em></p>
                            <h2>你有2.0积分即将过期，快去看看</h2>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <div class="f-wrap" style="background:cyan">
                            <van-icon class="iconfont" class-prefix='icon' name='qita' />
                        </div>
                        <figcaption>
                            <p><span>其他</span></p>
                            <h2>暂无</h2>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </div>
   </div>  
</template>

<script>
export default {
    name:'Message',
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.van-nav-bar .van-icon{
    color: #333;
    margin-top: 3px
}
.van-nav-bar__title{
    font-size: 15px
}
.van-nav-bar__text{
    color: #000
}
.h-header{
    border-bottom: 1px solid #d3d3d3
}
figure,p,h2,h1{
    margin: 0
}
.main ul {
    padding: 0 0 0 12px;
    
}
.main ul li{
    border-bottom: 1px solid #d3d3d3
}
.main ul li figure{
    display: flex;
    height: 80px;
    align-items: center
}
.main ul li figure .f-wrap{
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    background: orange;
    margin-right: 20px
}
.main ul li figure .f-wrap .iconfont{
    font-size: 25px;
    line-height: 50px;
    color: #fff;
}
.main ul li figure figcaption p{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    width:270px
}
.main ul li figure figcaption p em{
    font-style: normal;

}

.main ul li figure figcaption h2{
    font-size: 14px;
    font-weight: normal;
    color: #d5d5d5;
    
}
</style>